<template>
	<view class="container">
		<uv-navbar>
			<template v-slot:left>
				<view></view>
			</template>
			<template v-slot:right>
				<uv-icon name="setting" size="22"></uv-icon>
			</template>
		</uv-navbar>

		<view class="main">
			<!-- top -->
			<view class="user">

				<view class="user_left">

					<view class="avatar">
						<uv-avatar mode='aspectFill' src="https://img2.baidu.com/it/u=3412909306,1442259109&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" size="50"></uv-avatar>
					</view>
					<view class="username_info">
						<view class="ul-username">
							<view class="username">小赵</view>
							<uv-icon name="man" size="22" color="#2979ff"></uv-icon>
						</view>
						<view class="ul-sf">
							<view class="sf1">摄影师</view>
							<view class="sf1">|</view>
							<view class="sf1">广州</view>
							<view class="sf1">185****5162</view>
						</view>
						<view class="sm">
							<view class="sm_icon">
								<uv-icon name="file-text" size="13" color="#fff"></uv-icon>
								<view>未认证</view>
							</view>
							<view class="sm_icon">
								<uv-icon name="account" size="13" color="#fff"></uv-icon>
								<view>未实名</view>
							</view>
						</view>
					</view>

				</view>
				<view class="user_right" @click="toUserInfo">
					<view class="ur_info">个人主页</view>
					<uv-icon name="arrow-right" size="16"></uv-icon>
				</view>
			</view>
			<!-- end -->

			<view class="tff">
				<view class="tff_item">
					<view class="tff_count">20</view>
					<view class="tff_title">动态</view>
				</view>
				<view class="tff_item">
					<view class="tff_count">292</view>
					<view class="tff_title">关注</view>
				</view>
				<view class="tff_item">
					<view class="tff_count">86</view>
					<view class="tff_title">粉丝</view>
				</view>
			</view>

			<view class="recharge">
				<view class="left">
					<view class="rl_top">
						<uv-icon name="level" color="#fea4a6"></uv-icon>
						<view>咔咔约拍 VIP</view>
					</view>
					<view class="rl_bottom">
						点亮会员标志 享受尊贵特权
					</view>
				</view>
				<view class="right">
					<view class="r_box">
						<view>开通会员</view>
						<uv-icon name="arrow-rightward" color="#000" size="20rpx"></uv-icon>
					</view>
				</view>
			</view>

			<view class="works">
				<view class="work_item" @click="toWorks">
					<view class="icon">
						<uv-icon name="photo" color="#ff9092" size="24"></uv-icon>
					</view>
					<view class="wi_title">作品展示</view>
				</view>
				<view class="work_item">
					<uv-icon name="star" color="#ff9092" size="24"></uv-icon>
					<view class="wi_title">收藏</view>
				</view>
				<view class="work_item">
					<uv-icon name="thumb-up" color="#ff9092" size="24"></uv-icon>
					<view class="wi_title">点赞</view>
				</view>
				<view class="work_item">
					<uv-icon name="clock" color="#ff9092" size="24"></uv-icon>
					<view class="wi_title">浏览记录</view>
				</view>
			</view>

			<view class=" rz">
				<ul>
					<li>
						<view class="rz_item">
							<view class="rz_item_left">
								<uv-icon name="camera" size="20"></uv-icon>
								<view class="icon">我的约拍</view>
							</view>
							<view class="rz_item_right">
								<uv-icon name="arrow-right" size="16"></uv-icon>
							</view>
						</view>
					</li>
					<li>
						<view class="rz_item">
							<view class="rz_item_left">
								<uv-icon name="file-text" size="20"></uv-icon>
								<view class="icon">认证</view>
							</view>
							<view class="rz_item_right">
								<uv-icon name="arrow-right" size="16"></uv-icon>
							</view>
						</view>
					</li>
					<li>
						<view class="rz_item">
							<view class="rz_item_left">
								<uv-icon name="account" size="20"></uv-icon>
								<view class="icon">实名</view>
							</view>
							<view class="rz_item_right">
								<uv-icon name="arrow-right" size="16"></uv-icon>
							</view>
						</view>
					</li>
				</ul>
			</view>

			<view class=" rz">
				<ul>
					<li>
						<view class="rz_item">
							<view class="rz_item_left">
								<uv-icon name="question-circle" size="20"></uv-icon>
								<view class="icon">帮助中心</view>
							</view>
							<view class="rz_item_right">
								<uv-icon name="arrow-right" size="16"></uv-icon>
							</view>
						</view>
					</li>
					<li>
						<view class="rz_item">
							<view class="rz_item_left">
								<uv-icon name="info-circle" size="20"></uv-icon>
								<view class="icon">关于我们</view>
							</view>
							<view class="rz_item_right">
								<uv-icon name="arrow-right" size="16"></uv-icon>
							</view>
						</view>
					</li>
					<li>
						<view class="rz_item">
							<view class="rz_item_left">
								<uv-icon name="empty-order" size="20"></uv-icon>
								<view class="icon">其他</view>
							</view>
							<view class="rz_item_right">
								<uv-icon name="arrow-right" size="16"></uv-icon>
							</view>
						</view>
					</li>

				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toUserInfo() {
				uni.navigateTo({
					url: "/pages/userInfo/userInfo"
				})
			},
			toWorks(){
				uni.navigateTo({
					url:"/pages/model-works/model-works"
				})
			}
		}
	}
</script>

<style scoped>
	@import url(./user.css);
</style>